<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>登录</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="stylesheet" href="./css/login.css">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <link rel="script" href="js/axios-0.18.0.js">
</head>

<body>
  <div class="lg-container">
   <div class="container">
     <div class="banner">
        <p>用户登录</p>
       <div class="username"><input type="text" class="text-username" placeholder="请输入用户名"></div>
       <div class="password"><input type="password" class="text-password" placeholder="请输入密码"> </div>
       <div class="managerSelect">
         <input type="radio" name="manager" value="teacher" class="manager">老师
         <input type="radio" name="manager" value="student" class="manager">学生
         <input type="radio" name="manager" value="manager" class="manager">管理员
       </div>
       <div class="button"><input type="submit" class="submit"></div>
     </div>
  </div>
  </div>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  const button=document.querySelector(".submit");
  button.addEventListener("mouseenter",evt => button.style.opacity=0.5);
  button.addEventListener("mouseleave",evt => {
    button.style.opacity=1;
    button.style.backgroundImage="linear-gradient(to right,#68abff,#5f63ff)";
  });
  button.addEventListener("click",e=>{
    button.style.opacity=1;
    button.style.backgroundImage="linear-gradient(to left,#68abff,#5f63ff)";

    //获取用户名密码
    const username=document.querySelector(".text-username").value;
    const password=document.querySelector(".text-password").value;
    //获取身份
    let radios = document.getElementsByName('manager');
    let roleValue;
    for (let i = 0; i < radios.length; i++) {
      if (radios[i].checked) {
        roleValue = radios[i].value;
        break;
      }
    }
    //发送请求
    axios(
      {
        url:'/Student_Manger/login.do',
        method:'POST',
        //新增一个下拉选项，管理员对应的value值为：manager；教师对应的value值为：teacher；学生对应的value值为：student
        data:{username:username,password:password,role:roleValue}
      }).then(result=>{
        console.log(result);
        //传回数据处理
        //如果返回数字1，表示登录成功，跳转页面；如果返回数字0，表示账号或密码错误，重新登录
    })
  })
</script>
</body>

</html>